<template>
    <div>
        <el-dialog title='' :visible.sync="isShow" @close="onClose" width="70%">
            <div class="common-view">
                <div class="common-view1">
                    <div class="common-corse-view">
                        <div>
                            <el-image class="header-view" :src="studentInfo.imageUrl?studentInfo.imageUrl:studentHeaderUrl"></el-image>
                        </div>
                        <div style="font-size: 0.09rem;color: black;padding: 5px">
                            学生姓名 : {{studentInfo.name}}
                        </div>
                        <div style="margin-top: 5px">
                            <el-date-picker
                                    :key="timeKey"
                                    @change="handleDateChange"
                                    v-model="value"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <div style="margin-top: 5px">
                            <el-table :data="tableData" class="hide-scrollbar"
                                      :key="leftTableKey"
                                      :header-cell-style="headClass" :cell-style="rowClass" border>
                                <el-table-column prop="name" label="课程名称">
                                </el-table-column>
                                <el-table-column prop="value" label="次数/金额">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div style="flex: 3;height: 65vh;width: 90%">
                        <div style="padding: 30px 0px 30px 30px;width: 96%">
                            <el-table :data="courseTableData" height="59vh" class="hide-scrollbar" :key="tableKey"
                                      :header-cell-style="headClass1" :cell-style="rowClass1" border>
                                <el-table-column v-for="(column,index) in tableColumns" :key="index">
                                  <!-- 自定义表头布局 -->
                                  <template #header>
                                    <div>
                                      {{column.label1}}
                                    </div>
                                    <div v-if="column.label2">
                                      {{ column.label2 }}
                                    </div>
                                  </template>
                                    <template slot-scope="scope">
                                        <div v-if="index == 0">
                                            {{scope.row.time}}
                                        </div>
                                        <div v-if="index == 1">
                                            <div>
                                                {{scope.row.monday}}
                                            </div>
                                            <div>
                                                {{scope.row.mondayNickName}}
                                            </div>
                                        </div>
                                        <div v-if="index == 2">
                                            <div>
                                                {{scope.row.tuesday}}
                                            </div>
                                            <div>
                                                {{scope.row.tuesdayNickName}}
                                            </div>
                                        </div>
                                        <div v-if="index == 3">
                                            <div>
                                                {{scope.row.wednesday}}
                                            </div>
                                            <div>
                                                {{scope.row.wednesdayNickName}}
                                            </div>
                                        </div>
                                        <div v-if="index == 4">
                                            <div>
                                                {{scope.row.thursday}}
                                            </div>
                                            <div>
                                                {{scope.row.thursdayNickName}}
                                            </div>
                                        </div>
                                        <div v-if="index == 5">
                                            <div>
                                                {{scope.row.friday}}
                                            </div>
                                            <div>
                                                {{scope.row.fridayNickName}}
                                            </div>
                                        </div>
                                        <div v-if="index == 6">
                                            <div>
                                                {{scope.row.saturday}}
                                            </div>
                                            <div>
                                                {{scope.row.saturdayNickName}}
                                            </div>
                                        </div>
                                        <div v-if="index == 7">
                                            <div>
                                                {{scope.row.sunday}}
                                            </div>
                                            <div>
                                                {{scope.row.sundayNickName}}
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="bottom-view">
                    <div class="bottom-div-view">
                        <div style="color: black;font-size: 0.08rem;font-weight: bold;">
                            颜色示例 :
                        </div>
                        <div class="common-drop-view">
                            <span class="common-drop-color common-drop-gary"></span>
                            未开课
                        </div>
                        <div class="common-drop-view">
                            <span class="common-drop-color common-drop-green"></span>
                            已消课
                        </div>
                        <div class="common-drop-view">
                            <span class="common-drop-color common-drop-blue"></span>
                            已补课
                        </div>
                        <div class="common-drop-view">
                            <span class="common-drop-color common-drop-red"></span>
                            已请假
                        </div>
                    </div>
                    <div class="bottom-div-view">
                        <div class="btn-view" @click="preWeekDay">
                            上一周
                        </div>
                        <div class="btn-view" @click="nextWeekDay">
                            下一周
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getStudentBaseData, getStudentCoursePriceList, getStudentTimetablePackage} from '@/api/student'
    export default {
        props: ['isShowDialog','selectStudentId'],
        watch: {
          selectStudentId:{
            handler(newValue, oldValue) {
              this.studentId = newValue;
            },
            deep: true
          }
        },
        data() {
            return {
                firstDate: undefined,
                timeKey: Math.random(),
                leftTableKey: Math.random(),
                tableColumns: [
                  {
                    label1: '日期',
                    label2: '星期一',
                    prop: 'create_date',
                    max_width: 100,
                    align: 'center',
                  },
                ],
                propList:[
                    'monday','tuesday','wednesday','thursday','friday','saturday','sunday'
                ],
                tableData: [
                    {
                        name: '认知个训',
                        value: '2次'
                    }
                ],
                courseTableData: [],
                value: [],
                headerUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                studentHeaderUrl: require('../../../assets/images/student-header.png'),
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,
                studentInfo: {
                    imageUrl:''
                },
                tableKey: Math.random(),

            }
        },
        created() {
          console.log("查询课表的学生id为",this.selectStudentId)
          // 当前时间
          let d = new Date();
          this.firstDate = this.formatDate(d);
          this.getStudentTimetable(this.firstDate);
          this.getStudentInfo();
        },
        computed: {},
        methods: {
            formatBaseDate(date) {
              if (date) {
                const y = date.getFullYear();
                const m = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
                const d = ('0' + date.getDate()).slice(-2); // 日期也是从0开始的
                return `${y}-${m}-${d}`; // 返回格式化后的日期字符串
              } else {
                return ''; // 如果日期为空，返回空字符串
              }
            },
            handleDateChange(){
              const startDate = this.formatDate(this.value[0]);
              const endDate = this.formatDate(this.value[1]);
              console.log('-------开始日期:', startDate); // 输出格式化后的开始日期
              console.log('-------结束日期:', endDate); // 输出格式化后的结束日期
              this.getCourseInfo(startDate,endDate);
            },
            getCourseInfo(startDate,endDate){
              getStudentCoursePriceList(this.selectStudentId,startDate,endDate).then(resp=>{
                console.log("课程信息======",resp)
                this.tableData = []
                if (resp.code==200){
                  this.leftTableKey = Math.random();
                  let data = resp.data;
                  let courseList = data.studentCourseList;
                  courseList.forEach(item=>{
                    let item_course = {
                      name: item.course_name,
                      value: item.count+'次'
                    }
                    this.tableData.push(item_course)
                  })
                  // 总费用
                  this.tableData.push({
                    name: '总费用',
                    value: data.studentCoursePriceCount
                  })
                }
              })
            },
            formatDate(d){
              let month = d.getMonth() + 1;
              let monthZero = month > 10 ?month:'0' + month;
              // console.log(d.getFullYear()+'-' + monthZero + '-'+d.getDate())
              return d.getFullYear()+'-' + monthZero + '-'+d.getDate();
            },
            nextWeekDay(){ // 下一周
              let sevenDaysAgo = new Date(this.firstDate);
              sevenDaysAgo.setDate(sevenDaysAgo.getDate() + 7);
              let month = sevenDaysAgo.getMonth() + 1;
              let monthZero = month > 10 ?month:'0' + month;
              this.firstDate = sevenDaysAgo.getFullYear()+'-' + monthZero + '-'+sevenDaysAgo.getDate();
              console.log(this.firstDate);
              // return this.firstDate;
              this.$nextTick(()=>{
                this.getStudentTimetable(this.firstDate);
              })
            },
            preWeekDay(){// 上一周
              let sevenDaysAgo = new Date(this.firstDate);
              sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
              let month = sevenDaysAgo.getMonth() + 1;
              let monthZero = month > 10 ?month:'0' + month;
              this.firstDate = sevenDaysAgo.getFullYear()+'-' + monthZero + '-'+sevenDaysAgo.getDate();
              console.log(this.firstDate);
              // return this.firstDate;
              this.$nextTick(()=>{
                this.getStudentTimetable(this.firstDate);
              })
            },
            getStudentInfo(){
              getStudentBaseData({
                studentId:this.selectStudentId
              }).then((res) => {
                if (res.code == 200){
                  this.studentInfo = res.data
                  if (this.studentInfo.image){
                    this.studentInfo.imageUrl = process.env.VUE_APP_BASE_API + res.data.image
                  }else {
                    this.studentInfo.imageUrl = this.studentHeaderUrl
                  }
                }
              });
            },
            getStudentTimetable(searchDate){
              getStudentTimetablePackage(this.selectStudentId,searchDate).then(res => {
                console.log("课表是：",res);
                if(res.code != 200)
                  return;
                this.tableKey = Math.random();
                let dateArr = res.data.dateArr;
                let weekArr = res.data.weekArr;
                let responseVoList = res.data.responseVoList;
                let firstColumnHeader = {
                  label1: '时间',
                  label2: '',
                  prop: 'time',
                  max_width: 100,
                  align: 'center',
                };
                this.tableColumns = []
                this.tableColumns.push(firstColumnHeader)
                let startDate = '';
                let endDate = '';
                // 继续插入其他列
                dateArr.forEach((item,index) => {
                  if(index == 0){
                    // 记录下第一个时间 为了计算上一周  下一周的时间
                    this.firstDate = item;
                    startDate = item
                    this.value[0] = new Date(item) // 时间范围
                    console.log("日期被修改为",this.firstDate);
                  }
                  if(index == 6){
                    endDate = item
                    this.value[1] = new Date(item)// 时间范围
                  }
                  let label= item.substring(item.indexOf("-")+1).replace("-","月");
                  if(label.startsWith("0")){
                    label = label.slice(1)
                  }
                  let columnHeader = {
                    label1: label,
                    label2: weekArr[index],
                    prop: this.propList[index],
                    max_width: 100,
                    align: 'center',
                  };
                  this.tableColumns.push(columnHeader)
                })
                console.log("日期时间范围",this.value);
                // 获得课程信息 展示左侧课程列表信息
                this.getCourseInfo(startDate,endDate);
                this.timeKey = Math.random();
                this.courseTableData = []
                // 数据
                responseVoList.forEach((item,index) => {
                  let courseItem = {}
                  let time = item.startTime+'-'+item.endTime;
                  courseItem.time = time
                  // 二位数组  存储 周一到周日的上课信息
                  let timetables = item.timetables
                  timetables.forEach((item,index) => {
                    if(index == 0){
                      if(item[0]){
                        courseItem.monday = item[0].courseName;
                        courseItem.mondayNickName = item[0].nickName;
                      }else{
                        courseItem.monday = undefined;
                        courseItem.mondayNickName = '';
                      }
                    }else if(index == 1){
                      if(item[0]){
                        courseItem.tuesday = item[0].courseName
                          courseItem.tuesdayNickName = item[0].nickName;
                      }else{
                        courseItem.tuesday = undefined
                          courseItem.tuesdayNickName = '';
                      }
                    }else if(index == 2){
                      if(item[0]){
                        courseItem.wednesday = item[0].courseName
                          courseItem.wednesdayNickName = item[0].nickName;
                      }else{
                        courseItem.wednesday = undefined
                          courseItem.wednesdayNickName = '';
                      }
                    }else if(index == 3){
                      if(item[0]){
                        courseItem.thursday = item[0].courseName
                          courseItem.thursdayNickName = item[0].nickName;
                      }else{
                        courseItem.thursday = undefined
                        courseItem.thursdayNickName = '';
                      }
                    }else if(index == 4){
                      if(item[0]){
                        courseItem.friday = item[0].courseName
                          courseItem.fridayNickName = item[0].nickName;
                      }else{
                        courseItem.friday = undefined
                        courseItem.fridayNickName = '';
                      }
                    }else if(index == 5){
                      if(item[0]){
                        courseItem.saturday = item[0].courseName
                        courseItem.saturdayNickName = item[0].nickName
                      }else{
                        courseItem.saturday = undefined
                        courseItem.saturdayNickName = ''
                      }
                    }else if(index == 6){
                      if(item[0]){
                        courseItem.sunday = item[0].courseName
                        courseItem.sundayNickName = item[0].nickName
                      }else{
                        courseItem.sunday = undefined
                        courseItem.sundayNickName = ''
                      }
                    }
                  })
                  this.courseTableData.push(courseItem)
                })
              })
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeCourse')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:2px;background: #ededed;";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:1px;";
            },
            headClass1() {
                //表头居中显示
                return "text-align:center;padding:5px;background: #ededed;";
            },
            rowClass1() {
                //表格数据居中显示
                return "text-align:center;padding:5px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(75vh);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .common-view1 {
        height: 65vh;
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: row;
    }

    .bottom-view {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .bottom-div-view {
            display: flex;
            flex-direction: row;
            align-items: center;

            .btn-view {
                width: 80px;
                height: 35px;
                line-height: 35px;
                background: #0A77F9;
                color: white;
                text-align: center;
                border-radius: 5px;
                margin-right: 15px;
            }
        }
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        margin-top: 10vh !important;
        -webkit-transform: none;
        transform: none;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    /deep/ .el-dialog__header {
        padding: 0 !important;
    }

    .examine-view {
        color: #2b2cff;
        border-bottom: 1px solid #2b2cff;
    }

    //隐藏指定 el-table 的水平滚动条
    /*.hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {*/
    /*    width: 0 !important;*/
    /*    height: 0 !important;*/
    /*    background-color: transparent;*/
    /*}*/

    /*.hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {*/
    /*    width: 0px !important;*/
    /*    border-right-width: 0;*/
    /*    border-bottom-width: 0;*/
    /*    padding: 0;*/
    /*}*/

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    /deep/ .el-button--medium.is-round {
        padding: 0.08rem 0.2rem;
        font-size: 0.11rem;
        border-radius: 0.2rem;
    }

    .common-corse-view {
        flex: 1;
        height: 65vh;
        display: flex;
        flex-direction: column;
        text-align: center;

        .header-view {
            width: 70px;
            height: 70px;
            margin-top: 10px
        }
    }

    .common-drop-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 10px;

        .common-drop-color {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .common-drop-gary {
            background: #d0d0d0;
        }

        .common-drop-blue {
            background: blue;
        }

        .common-drop-green {
            background: green;
        }

        .common-drop-red {
            background: red;
        }
    }
</style>

